<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点</title>
</head>
<body>
    <div>
        <p><span></span></p>
        <p></p>
        <p></p>
    </div>
</body>
<script>
    var div = document.getElementsByTagName('div')[0];
    // 遍历节点树
    div.parentNode; // (最顶端的parentNode为#document);
    div.childNodes; // 子节点们
    div.firstChild; // 第一个子节点
    div.lastChild; // 最后一个子节点
    div.nextSibling; // 后一个兄的节点previousSibling 前一个兄弟节点

    // 基于元素节点树的遍历
    div.parentElement; // 返回当前元素的父元素节点 (ie不兼容)
    div.children; // 只返回当前元素的元素子节点
    div.children.length; // === div.node.childElementCount; // 当前元素节点的子元素节点个数
    div.firstElementChild; // 返回的是第一个元素节点 (ie不兼容)
    div.lastElementChild; // 返回的是最后一个元素节点 (ie不兼容)
    div.nextElementSibling; // 返回后一个兄弟元素
    div.previousElementSibling; // 返回前一个兄弟元素

    // 节点类型
    // 元素节点 1
    // 属性节点 2
    // 文本节点 3
    // 注释节点 8
    // documment 9
    // DocumentFragment 11

    // 节点的四个属性
    // nodeName 元素的标签名,以大写方式表示,只读
    // nodeValue Text节点或Comment节点的文本内容,可读写
    // nodeType 该节点的类型,只读
    // attributes Element节点的属性集合
    //
    // 节点的一个方法
    // Node.hasChildNodes();
</script>
</html>
